import React, { } from 'react'
import F2Chart from './chart'
import { AreaProps } from './type'
import { randomId } from './util'
import * as util from './util'

function draw(chart: any, F2: any, props: AreaProps): void {
  if (!chart) {
    return
  }
  const { categories, series, xAxis, yAxis, tooltip, legend, adjust } = props

  chart.clear()

  if (!Array.isArray(series) || series.length <= 0) {
    return
  }

  let data: Array<{ key: string; value: number; type: string }> = []
  if (series.length === 1) {
    data = series[0].data.map((item, i) => {
      return {
        key: categories[i],
        value: item,
        type: series[0].type
      }
    })
  } else if (series.length > 1) {
    series.forEach(kind => {
      data = data.concat(kind.data.map((item, i) => {
        return {
          key: categories[i],
          value: item,
          type: kind.type
        }
      }))
    })
  }
  chart.source(data)

  if (xAxis) {
    if (xAxis.htAlign) {
      xAxis.label = util.label
    }
    chart.scale('key', util.scale(xAxis))
    chart.axis('key', util.axis(xAxis, F2))
  }
  if (yAxis) {
    chart.scale('value', util.scale(yAxis))
    chart.axis('value', util.axis(yAxis, F2))
  }
  chart.tooltip(tooltip)
  chart.legend(legend)

  const style = {}
  series.forEach(kind => {
    style[kind.type] = kind.style
  })
  const color = {}
  series.forEach(kind => {
    color[kind.type] = kind.color
  })

  if (series.length === 1) {
    chart.area().position('key*value').color('type', type => {
      return color[type]
    }).adjust(adjust)
    chart.line().position('key*value').color('type', type => {
      return color[type]
    }).shape('type', type => {
      return style[type] || 'line'
    }).adjust(adjust)
    if (series[0].point) {
      chart.point().position('key*value').style(series[0].point)
    }
  } else if (series.length > 1) {
    chart.area().position('key*value').color('type', type => {
      return color[type]
    }).adjust(adjust)
    chart.line().position('key*value').color('type', type => {
      return color[type]
    }).shape('type', type => {
      return style[type] || 'line'
    }).adjust(adjust)
    const pointType: string[] = []
    let pointStyle
    series.forEach(kind => {
      if (kind.point) {
        pointType.push(kind.type)
        pointStyle = kind.point
      }
    })
    if (pointType.length) {
      chart.point().position('key*value').color('type').size('type', v => {
        if (!pointType.includes(v)) {
          return 0
        }
      }).style(pointStyle)
    }
  }

  chart.render()
}

type OwnProps = AreaProps

const defaultProps: OwnProps = {
  cn: 'area',
  categories: [],
  series: [],
  xAxis: {
    tickCount: 3
  },
  yAxis: {
    tickCount: 3
  },
  tooltip: false,
  legend: false
}

const onInitChart = (F2, config, props) => {
  const chart = new F2.Chart(config);
  draw(chart, F2, props)
  // 注意：需要把chart return 出来
  return chart;
}

export default function Area(props: OwnProps = defaultProps) {
  return (
    <F2Chart id={`area_${randomId()}`} onInit={(f, conf) => onInitChart(f, conf, props)}></F2Chart>
  )
}

Area.defaultProps = defaultProps
